import React, { Component, Fragment } from 'react';
import { Stack, Scene, Actions } from 'react-native-router-flux';
import { observer } from 'mobx-react/native';
import List from './customers';
import Result from './searchResult';
import store from '../models/customers';
import navBarStyle from '../../../components/navBarStyle';
import Icon from '../../../components/NavBarIconBtn';

const AddCustomer = () => (
  <Icon name="plus" onPress={Actions.createCustomerBase} title="新增客户" />
);

@observer
class CustomerList extends Component {
  render() {
    return (
      <List
        data={this.props.store.data}
        refresh={this.props.store.fetch.bind(this.props.store)}
        loading={this.props.store.pending}
        remove={id => this.props.store.remove(id)}
        search={this.props.store.search.bind(this.props.store)}
      />
    );
  }
}
@observer
class CustomerResult extends Component {
  render() {
    return <ResultList data={store.result} />;
  }
}
module.exports = (
  <Stack key="customers" hideNavBar>
    <Scene
      key="customerList"
      component={CustomerList}
      title="客户"
      path="/customer/list"
      hideNavBar={false}
      store={store}
      renderRightButton={AddCustomer}
      onEnter={() => store.init()}
      {...navBarStyle}
    />
    <Scene
      key="customerSreach"
      component={Result}
      title="搜索客户"
      hideNavBar={false}
      hideTabBar
      store={store}
      onExit={store.clearResult}
      {...navBarStyle}
    />
  </Stack>
);
